<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>前端</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

</head>
<style>
    .box{
        position: relative;
        width: 400px;
        height: 700px;
        background: #66afe9;
        border: 1px solid;
        margin: 0 auto;
    }
    .button1{
        position: absolute;
        left: 5px;
        top: 5px;
    }
    .mask{
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background: black;
        opacity: 0.4;
        z-index: 999;
    }
    .alert{
        position: absolute;
        background: white;
        left: 50%;
        top: 50%;
        width: 200px;
        height: 100px;
        transform: translate(-50%, -50%);
        border-radius: 10px;
        box-shadow: 5px 5px 5px lightblue;
        z-index: 1000;
    }
    label{
        display: block;
        margin: 10px auto;
        width: 90%;
        text-align: center;
    }
    .button2{
        position: absolute;
        right: 15%;
        bottom: 10px;
    }
    .button3{
        position: absolute;
        left: 15%;
        bottom: 10px;
    }
</style>
<body>
<div class="box">
    <button class="button1" onclick="button1click()">按钮一</button>
    <div class="alert">
        <label>这是一个弹窗</label>
    </div>
    <div class="mask"></div>
</div>
</body>
</html>
<script>
    $(document).ready(function () {
        $(".alert,.mask").hide();
    });
    $(".mask,.button2").click(function () {
        $(".alert,.mask,.button2").fadeOut();
    });
    function button1click() {
        $(".alert").find("button").remove();
        console.log('点击了按钮');
        $(".alert,.mask").fadeIn();
        $(".alert").find("label").html("这真的是一个弹窗吗？");
        $(".alert").find("label").after('<button class="button2" onclick="exit()">确定</button>');
        $(".alert").find("button").before('<button class="button3" onclick="exit()">删除</button>');
    }
    function exit() {
        $(".alert,.mask,.button2").fadeOut();
    }
</script>